import React from 'react';
import FieldGroup from '../components/FieldGroup';
import { Button, Col } from 'react-bootstrap';
import { reader } from '../utils/index';
var path = require('path');

class UploadView extends React.Component {

    componentDidMount() {
        this.initData();
    }

    render() {
        const { actions, uploadData } = this.props;
        const { showCaseData } = uploadData;
        console.log('actions', actions);
        console.log('uploadData', uploadData);
        return (
            <div className="upload">
                <Col md={3}>
                    <FieldGroup
                        id="showcase_cover"
                        type="file"
                        label="封面:"
                        onChange={(e) => { console.log('e', e.target.files); this.changeFieldData(e) }}
                    />
                    <FieldGroup
                        id="showcase_name_label"
                        type="text"
                        label="Name Label:"
                        onChange={(e) => this.changeFieldData(e)}
                    />
                    <FieldGroup
                        id="showcase_name_value"
                        type="text"
                        label="Name Value:"
                        onChange={(e) => this.changeFieldData(e)}
                    />
                    <FieldGroup
                        id="showcase_tag_label"
                        type="text"
                        label="Tag Label:"
                        onChange={(e) => this.changeFieldData(e)}
                    />
                    <FieldGroup
                        id="showcase_tag_value"
                        type="text"
                        label="Tag Value:"
                        onChange={(e) => this.changeFieldData(e)}
                    />
                    <Button bsStyle="primary" onClick={() => actions.postUploadData(showCaseData)}>POST DATA</Button>
                </Col>
            </div>
        );
    }
    initData = () => {

    }
    changeFieldData = (e) => {
        const { actions } = this.props;
        const { id, value } = e.target;
        let fieldName = id;
        let fieldValue = value;
        console.log('calling changeFieldData');
        //用FileReader读取图片内容
        if (fieldName === "showcase_cover") {
            const file = e.target.files[0];

            reader(file)
                .then((reader) => fieldValue = reader.result)
                .then(() => actions.changeFieldData(fieldName, fieldValue));

            // const reader = new FileReader();
            // reader.onload = (event) => {
            //     const fileObject = {
            //         fileName: file.name,
            //         data: event.target.result,
            //         size: file.size
            //     };
            //     fieldValue = fileObject.data;
            //     // console.log('fileObject', fileObject);
            // };
            // reader.readAsDataURL(file);

        } else {
            actions.changeFieldData(fieldName, fieldValue);
        }

    }

}
export default UploadView;